<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <title>设备添加</title>
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">


</head>
<body>

<!--头部-->
<div class="fluidCont">
    <div class="header main">
        <div class="logo floatL">
            <img src="image/logo.png" alt="">
            <!--<p>北京佰人科技物联网平台</p>-->
        </div>

        <div class="user floatR">
            <div class="userBox">
                <i class="userIco fa fa-user"></i>
                <span>佰人科技</span>
                <i class="jt fa fa-caret-down" aria-hidden="true"></i>
            </div>
            <ul class="userMenu">
                <li class="changePWD"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>修改密码</li>
                <li class="loginOut"><i class="fa fa-sign-out" aria-hidden="true"></i>退出登录</li>
            </ul>
        </div>
    </div>
</div>

<div class="main">
    <div class="toolBar">
        <!--当前位置-->
        <div class="curPos">
            <p><i class="fa fa-home" aria-hidden="true"></i> 首页 > 系统设置 </p>
        </div>

        <!--操作导航-->
        <ul class="tools">
            <li><i class="fa fa-reply" aria-hidden="true"></i> 返回上页</li>
        </ul>

    </div>




        <!--<table id="tab11" style="display: none">-->
            <!--<tbody>-->
            <!--<tr>-->
                <!--<td>-->
                    <!--<input type="text" name="NO" value="1"/>-->
                <!--</td>-->
                <!--<td>-->
                    <!--<input type="text" name="equipmentName" placeholder="请填写设备名称"/>-->
                <!--</td>-->
                <!--<td class="postr">-->
                    <!--<div class="distpicker">-->
                        <!--<select name="province"></select>-->
                        <!--<select name="city"></select>-->
                        <!--<select name="district"></select>-->
                    <!--</div>-->
                    <!--<input type="text" name="equipmentAdd" placeholder="请填写详细地址"/>-->
                <!--</td>-->
                <!--<td>-->
                    <!--<input type="text" name="equipmentNo" placeholder="请填写传感器编号"/>-->
                <!--</td>-->
                <!--<td>-->
                    <!--<input type="text" name="position" placeholder="请填写传感器终端安装位置"/>-->
                <!--</td>-->
                <!--<td>-->
                    <!--<i onClick="deltr(this)" class="fa fa-minus-circle" aria-hidden="true"></i>-->
                <!--</td>-->
            <!--</tr>-->
            <!--</tbody>-->
        <!--</table>-->

    <form type="post" action="?wujh">
        <table id="dynamicTable"  class="table table-bordered" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <td width="5%">序号</td>
                <td width="10%">被监测设备名称</td>
                <td width="50%">设备所在地址</td>
                <td width="10%">传感器编号</td>
                <td width="20%">安装位置</td>
                <td width="5%" align="center">增/减</td>
            </tr>
            </thead>
            <tbody>
            <tr class="firstTr">
                <td>
                    <input type="text" name="NO" value="1"/>
                </td>
                <td>
                    <input type="text" name="equipmentName" placeholder="请填写设备名称"/>
                </td>
                <td class="postr">
                    <div class="distpicker">
                        <select name="province"></select>
                        <select name="city"></select>
                        <select name="district"></select>
                    </div>
                    <input type="text" name="equipmentAdd" placeholder="请填写详细地址"/>
                </td>
                <td>
                    <input type="text" name="equipmentNo" placeholder="请填写传感器编号"/>
                </td>
                <td>
                    <input type="text" name="position" placeholder="请填写传感器终端安装位置"/>
                </td>
                <td>
                    <i onClick="deltr(this)" class="fa fa-minus-circle" aria-hidden="true"></i>
                </td>
            </tr>
            </tbody>


        </table>
        <div class="addEqu">
            <div class="addBtnBox">
                <i id="btn_addtr" class="fa fa-plus-circle" aria-hidden="true"></i>
            </div>
        </div>
        <div class="equLastBox">
            <div id="submit" class="btn  btn-success">提交</div>

        </div>

    </form>


</div>


<!--foot-->
<div class="footer">版权所有: 北京佰人科技物联网平台</div>


<!--js-->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/layer/layer.js"></script>

<script src="js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--城市选择插件-->

<script src="js/distpicker/distpicker.js"></script>




<script src="js/bairen.js"></script>


<script type="text/javascript">

    $(function () {
        var show_count = 20;   //要显示的条数
        var count = 1;    //递增的开始值，这里是你的ID
        $("#btn_addtr").click(function () {

            $("#dynamicTable tbody tr:last-child input").each(function () {
               if($(this).val()==""){
                   $(this)[0].style.background="red";
               }



            });



            var length = $("#dynamicTable tbody tr").length;
            //alert(length);
            if (length < show_count)    //点击时候，如果当前的数字小于递增结束的条件
            {
                $("#dynamicTable tbody tr:last-child").clone().find("input[name=equipmentName],input[name=equipmentNo]").val("").parents("tr").appendTo("#dynamicTable tbody");   //在表格后面添加一行

                changeIndex();//更新行号
            }
        });


    });

    function changeIndex() {
        var i = 1;
        $("#dynamicTable tbody tr").each(function () { //循环tab tbody下的tr
            $(this).find("input[name='NO']").val(i++);//更新行号

            $('.distpicker').distpicker({
                province: addInfoObj.province,
                city: addInfoObj.city,
                district: addInfoObj.district
            });

        });
    }

    function deltr(opp) {
        var length = $("#dynamicTable tbody tr").length;
        //alert(length);
        if (length <= 1) {
            layer.msg('至少保留一行！', {
                btn: '确定',//按钮
                time: 3000, //20s后自动关闭
                icon: 7
            });
        } else {
            $(opp).parent().parent().remove();//移除当前行
            changeIndex();
        }
    }
</script>


<script>

    $('.distpicker').distpicker({
        province: '---- 所在省 ----',
        city: '---- 所在市 ----',
        district: '---- 所在区 ----'
    });


    var addInfoObj ={};



    //地址信息保留
    $(document).on("change", "tr:last-child select", function (event) {
        addInfoObj.province =$(this).parents("tr").find("select[name=province]").val();
        addInfoObj.city =$(this).parents("tr").find("select[name=city]").val();
        addInfoObj.district =$(this).parents("tr").find("select[name=district]").val();
        console.log(addInfoObj)
    });


    $(document).on("blur", "tr:last-child input[name=equipmentAdd]", function (event) {
        addInfoObj.equipmentAdd =$(this).val();
        console.log(addInfoObj)
    });


    $(document).on("blur", "tr:last-child input[name=position]", function (event) {
        addInfoObj.position =$(this).val();

        console.log(addInfoObj)
    });



    $("#submit").click(function () {
        var equObj =[];

        $("#dynamicTable tbody tr").each(function (i) {
            equObj[i]={};
            equObj[i].equipmentName=$(this).find("input[name=equipmentName]").val();
            equObj[i].province=$(this).find("select[name=province]").val();
            equObj[i].city=$(this).find("select[name=city]").val();
            equObj[i].district=$(this).find("select[name=district]").val();
            equObj[i].equipmentAdd=$(this).find("input[name=equipmentAdd]").val();
            equObj[i].equipmentNo=$(this).find("input[name=equipmentNo]").val();
            equObj[i].position=$(this).find("input[name=position]").val();

        });
        console.log(equObj);
    });


</script>
</body>
</html>
<!---->